<template>
  <div class="maintenance-plan-management">
    <!-- 操作栏：制定保养计划按钮 + 搜索 -->
    <div class="operation-bar">
      <el-button type="primary" icon="el-icon-plus" @click="openAddDialog" size="medium">+ 制定保养计划</el-button>
      <div class="search-group">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入设备名称/设备编码"
          style="width: 240px;margin-left: 480px"
          @keyup.enter="handleSearch"
          clearable
        />
        <el-button type="primary" icon="el-icon-search" @click="handleSearch" size="medium"></el-button>
        <el-button type="success" icon="el-icon-refresh" @click="handleRefresh" size="medium" title="刷新数据"></el-button>
        <el-button type="primary" icon="el-icon-s-operation" size="medium"></el-button>
      </div>
    </div>

    <!-- 保养计划表格 -->
    <el-table 
      :data="tableData" 
      :loading="loading"
      border 
      style="width: 100%; margin-bottom: 20px;"
      :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: '600' }"
    >
      <el-table-column prop="equipmentName" label="设备名称" width="100" align="center" />
      <el-table-column prop="equipmentCode" label="设备编码" width="120" align="center" />
      <el-table-column prop="equipmentType" label="设备类型" width="100" align="center" />
      <el-table-column prop="maintenanceItem" label="保养项目" width="120" align="center" />
      <el-table-column prop="creationDate" label="制定日期" width="120" align="center" />
      <el-table-column prop="maintenancePeriod" label="保养周期" width="100" align="center" />
      <el-table-column prop="maintenanceLevelName" label="保养等级" width="100" align="center" />
      <el-table-column label="操作" width="320" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleView(scope.row)" icon="el-icon-view">查看</el-button>
          <el-button type="warning" size="small" @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" size="small" plain @click="handleDelete(scope.row)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrap">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="prev, pager, next, ->, jumper, ->, sizes, total"
        :total="total"
        :page-count="9"
        :pager-count="9"
      />
    </div>

    <!-- 制定保养计划对话框 -->
    <el-dialog 
      title="计划信息" 
      :visible.sync="addDialogVisible" 
      width="900px"
      :close-on-click-modal="false"
      class="maintenance-plan-dialog"
      :show-close="false"
    >
      <div class="plan-form-container">
        <h2 class="form-title">计划信息</h2>
        
        <el-form 
          :model="form" 
          :rules="formRules"
          ref="maintenancePlanForm"
          label-width="120px" 
          class="plan-form"
        >
          <el-row :gutter="40">
            <!-- 左列 -->
          <el-col :span="12">
              <el-form-item label="设备名称:" prop="equipmentId">
                <el-select 
                  v-model="form.equipmentId" 
                  placeholder="请选择设备"
                  style="width: 100%"
                  filterable
                  clearable
                >
                  <el-option 
                    v-for="equipment in equipmentList" 
                    :key="equipment.equipmentId" 
                    :label="equipment.equipmentName" 
                    :value="equipment.equipmentId"
                  />
              </el-select>
            </el-form-item>
              
              <el-form-item label="计划开始时间*:" prop="planStartTime">
              <el-date-picker
                v-model="form.planStartTime"
                type="date"
                placeholder="请选择计划开始时间"
                  style="width: 100%"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
              />
            </el-form-item>
              
              <el-form-item label="保养项目*:" prop="maintenanceItem">
                <el-input 
                  v-model="form.maintenanceItem" 
                  placeholder="请输入保养项目"
                  maxlength="100"
                />
            </el-form-item>
              
              <el-form-item label="保养级别*:" prop="maintenanceLevel">
                <el-select 
                  v-model="form.maintenanceLevel" 
                  placeholder="--请选择保养级别--"
                  style="width: 100%"
                  clearable
                  @change="handleMaintenanceLevelChange"
                >
                  <el-option 
                    v-for="level in maintenanceLevels" 
                    :key="level.value" 
                    :label="level.label" 
                    :value="level.value"
                  />
              </el-select>
            </el-form-item>
            
            <el-form-item label="保养周期:">
              <el-select 
                v-model="form.maintenancePeriod" 
                placeholder="--请选择保养周期--"
                style="width: 100%"
                clearable
              >
                <el-option 
                  v-for="period in maintenancePeriods" 
                  :key="period.value" 
                  :label="period.label" 
                  :value="period.value"
                />
              </el-select>
            </el-form-item>
              
              <el-form-item label="备注:">
              <el-input
                  v-model="form.remarks"
                type="textarea"
                  rows="3"
                placeholder="请输入备注"
                  maxlength="200"
                />
              </el-form-item>
            </el-col>
            
            <!-- 右列 -->
            <el-col :span="12">
              <el-form-item label="计划结束时间:">
                <el-date-picker
                  v-model="form.planEndTime"
                  type="date"
                  placeholder="请选择时间"
                  style="width: 100%"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
              
              <el-form-item label="预计费用:">
                <el-input 
                  v-model="form.estimatedCost" 
                  placeholder="请输入预计费用 (元)"
                  type="number"
                  min="0"
                  step="0.01"
                />
              </el-form-item>
              
              <el-form-item label="负责人:">
                <el-input 
                  v-model="form.responsiblePerson" 
                  placeholder="请输入负责人"
                  maxlength="50"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelForm" class="cancel-btn">取消</el-button>
        <el-button type="primary" @click="submitForm" class="save-btn">保存</el-button>
      </div>
    </el-dialog>
    
    <!-- 详情查看对话框 -->
    <el-dialog
      title="保养计划详情"
      :visible.sync="detailDialogVisible"
      width="800px"
      :close-on-click-modal="false"
      class="detail-dialog"
    >
      <div class="detail-container">
        <h2 class="detail-title">保养计划详情</h2>
        
        <div class="detail-content">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label>保养计划ID：</label>
                <span>{{ detailData.maintenancePlanId }}</span>
              </div>
              <div class="detail-item">
                <label>设备名称：</label>
                <span>{{ detailData.equipmentName }}</span>
              </div>
              <div class="detail-item">
                <label>设备编码：</label>
                <span>{{ detailData.equipmentCode }}</span>
              </div>
              <div class="detail-item">
                <label>设备类型：</label>
                <span>{{ detailData.equipmentType }}</span>
              </div>
              <div class="detail-item">
                <label>计划开始时间：</label>
                <span>{{ detailData.planStartTime }}</span>
              </div>
              <div class="detail-item">
                <label>计划结束时间：</label>
                <span>{{ detailData.planEndTime || '未设置' }}</span>
              </div>
            </el-col>
            
            <el-col :span="12">
              <div class="detail-item">
                <label>保养项目：</label>
                <span>{{ detailData.maintenanceItem }}</span>
              </div>
              <div class="detail-item">
                <label>保养级别：</label>
                <span>{{ detailData.maintenanceLevelName }}</span>
              </div>
              <div class="detail-item">
                <label>保养周期：</label>
                <span>{{ detailData.maintenancePeriod }}</span>
              </div>
              <div class="detail-item">
                <label>预计费用：</label>
                <span>{{ detailData.estimatedCost ? '¥' + detailData.estimatedCost : '未设置' }}</span>
              </div>
              <div class="detail-item">
                <label>负责人：</label>
                <span>{{ detailData.responsiblePerson || '未设置' }}</span>
              </div>
              <div class="detail-item">
                <label>计划状态：</label>
                <el-tag :type="getStatusTagType(detailData.planStatus)">
                  {{ detailData.planStatusName }}
                </el-tag>
              </div>
            </el-col>
          </el-row>
          
          <div class="detail-item full-width">
            <label>制定日期：</label>
            <span>{{ detailData.creationDate }}</span>
          </div>
          
          <div class="detail-item full-width">
            <label>备注：</label>
            <span>{{ detailData.remarks || '无' }}</span>
          </div>
        </div>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false" class="cancel-btn">关闭</el-button>
        <el-button type="primary" @click="handleEditFromDetail" class="edit-btn">编辑</el-button>
      </div>
    </el-dialog>
    
    <!-- 编辑对话框 -->
    <el-dialog
      title="编辑保养计划"
      :visible.sync="editDialogVisible"
      width="900px"
      :close-on-click-modal="false"
      class="edit-dialog"
    >
      <div class="edit-container">
        <h2 class="edit-title">编辑保养计划</h2>
        
        <el-form
          :model="editForm"
          :rules="formRules"
          ref="editForm"
          label-width="120px"
          class="edit-form"
        >
          <el-row :gutter="40">
            <!-- 左列 -->
            <el-col :span="12">
              <el-form-item label="设备名称:" prop="equipmentId">
                <el-select 
                  v-model="editForm.equipmentId" 
                  placeholder="请选择设备"
                  style="width: 100%"
                  filterable
                  clearable
                  disabled
                >
                  <el-option 
                    v-for="equipment in equipmentList" 
                    :key="equipment.equipmentId" 
                    :label="equipment.equipmentName" 
                    :value="equipment.equipmentId"
                  />
                </el-select>
              </el-form-item>
              
              <el-form-item label="计划开始时间*:" prop="planStartTime">
                <el-date-picker
                  v-model="editForm.planStartTime"
                  type="date"
                  placeholder="选择开始时间"
                  style="width: 100%"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
              
              <el-form-item label="保养项目*:" prop="maintenanceItem">
                <el-input
                  v-model="editForm.maintenanceItem"
                  placeholder="请输入保养项目"
                  maxlength="100"
                />
              </el-form-item>
              
              <el-form-item label="保养级别*:" prop="maintenanceLevel">
                <el-select 
                  v-model="editForm.maintenanceLevel" 
                  placeholder="--请选择保养级别--"
                  style="width: 100%"
                  clearable
                  @change="handleEditMaintenanceLevelChange"
                >
                  <el-option 
                    v-for="level in maintenanceLevels" 
                    :key="level.value" 
                    :label="level.label" 
                    :value="level.value"
                  />
                </el-select>
              </el-form-item>
              
              <el-form-item label="保养周期:">
                <el-select 
                  v-model="editForm.maintenancePeriod" 
                  placeholder="--请选择保养周期--"
                  style="width: 100%"
                  clearable
                >
                  <el-option 
                    v-for="period in maintenancePeriods" 
                    :key="period.value" 
                    :label="period.label" 
                    :value="period.value"
                  />
                </el-select>
              </el-form-item>
              
              <el-form-item label="备注:">
                <el-input
                  v-model="editForm.remarks"
                  type="textarea"
                  rows="3"
                  placeholder="请输入备注"
                  maxlength="200"
                />
              </el-form-item>
            </el-col>
            
            <!-- 右列 -->
            <el-col :span="12">
              <el-form-item label="计划结束时间:">
                <el-date-picker
                  v-model="editForm.planEndTime"
                  type="date"
                  placeholder="选择结束时间"
                  style="width: 100%"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
              
              <el-form-item label="预计费用:">
                <el-input
                  v-model="editForm.estimatedCost"
                  placeholder="请输入预计费用"
                  type="number"
                  min="0"
                  step="0.01"
                >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              
              <el-form-item label="负责人:">
                <el-input
                  v-model="editForm.responsiblePerson"
                  placeholder="请输入负责人"
                  maxlength="50"
                />
              </el-form-item>
              
              <el-form-item label="计划状态:">
                <el-select 
                  v-model="editForm.planStatus" 
                  placeholder="请选择计划状态"
                  style="width: 100%"
                  clearable
                >
                  <el-option label="待执行" :value="0" />
                  <el-option label="执行中" :value="1" />
                  <el-option label="已完成" :value="2" />
                  <el-option label="已取消" :value="3" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit" class="cancel-btn">取消</el-button>
        <el-button type="primary" @click="submitEdit" class="save-btn">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { maintenancePlanApi } from '@/api/maintenancePlan'
import { equipmentApi } from '@/api/equipment'

export default {
  name: 'MaintenancePlanManagement',
  data() {
    return {
      // 分页相关
      currentPage: 1,
      pageSize: 10,
      total: 0,
      
      // 搜索相关
      searchKeyword: '',
      
      // 表格数据
      tableData: [],
      loading: false,
      
      // 对话框相关
      addDialogVisible: false,
      detailDialogVisible: false,
      editDialogVisible: false,
      
      // 表单数据
      form: {
        maintenancePlanId: '',
        equipmentId: '',
        planStartTime: '',
        planEndTime: '',
        maintenanceItem: '',
        maintenanceLevel: '',
        maintenancePeriod: '',
        estimatedCost: '',
        responsiblePerson: '',
        remarks: ''
      },
      
      // 详情数据
      detailData: {},
      
      // 编辑表单数据
      editForm: {
        maintenancePlanId: '',
        equipmentId: '',
        planStartTime: '',
        planEndTime: '',
        maintenanceItem: '',
        maintenanceLevel: '',
        maintenancePeriod: '',
        estimatedCost: '',
        responsiblePerson: '',
        remarks: '',
        planStatus: 0
      },
      
      // 保养级别选项
      maintenanceLevels: [
        { value: 1, label: '一级保养' },
        { value: 2, label: '二级保养' },
        { value: 3, label: '三级保养' }
      ],
      
      // 保养周期选项
      maintenancePeriods: [
        { value: '月度', label: '月度' },
        { value: '季度', label: '季度' },
        { value: '半年', label: '半年' },
        { value: '年度', label: '年度' }
      ],
      
      // 设备列表
      equipmentList: [],
      
      // 表单验证规则
      formRules: {
        equipmentId: [
          { required: true, message: '请选择设备', trigger: 'change' }
        ],
        planStartTime: [
          { required: true, message: '请选择计划开始时间', trigger: 'change' }
        ],
        maintenanceItem: [
          { required: true, message: '请输入保养项目', trigger: 'blur' },
          { min: 2, max: 100, message: '保养项目长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        maintenanceLevel: [
          { required: true, message: '请选择保养级别', trigger: 'change' }
        ]
      }
    }
  },
  
  mounted() {
    this.loadMaintenancePlanData()
    this.loadEquipmentList()
  },
  methods: {
    // 加载设备列表
    async loadEquipmentList() {
      try {
        const response = await equipmentApi.getAllEquipmentNames()
        if (response.code === 200) {
          this.equipmentList = response.data || []
        } else {
          console.error('获取设备列表失败:', response.message)
          this.$message.error('获取设备列表失败')
        }
      } catch (error) {
        console.error('获取设备列表失败:', error)
        this.$message.error('获取设备列表失败，请稍后重试')
      }
    },
    
    // 加载保养计划数据
    async loadMaintenancePlanData() {
      this.loading = true
      try {
        const params = {
          current: this.currentPage,
          size: this.pageSize,
          keyword: this.searchKeyword
        }
        

        
        const response = await maintenancePlanApi.getMaintenancePlanPage(params)
        console.log('API响应:', response)
        
        if (response.code === 200) {
          this.tableData = response.data.records || []
          this.total = response.data.total || 0

        } else {
          this.$message.error(response.message || '加载数据失败')
          // 如果API调用失败，使用模拟数据
          this.addMockData()
        }
      } catch (error) {
        console.error('加载保养计划数据失败:', error)
        this.$message.error('加载数据失败，请稍后重试')
        // 如果API调用失败，使用模拟数据
        this.addMockData()
      } finally {
        this.loading = false
      }
    },
    
    // 搜索功能
    handleSearch() {
      this.currentPage = 1
      this.loadMaintenancePlanData()
    },
    
    // 重置搜索
    handleReset() {
      this.searchKeyword = ''
      this.currentPage = 1
      this.loadMaintenancePlanData()
    },
    
    // 刷新数据
    async handleRefresh() {
      this.$message.info('正在刷新数据...')
      await this.loadMaintenancePlanData()
    },
    
    // 分页相关
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.loadMaintenancePlanData()
    },
    
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadMaintenancePlanData()
    },
    
    // 打开新增对话框
    openAddDialog() {
      this.addDialogVisible = true
      this.resetForm()
    },
    
      // 重置表单
    resetForm() {
      this.form = {
        maintenancePlanId: '',
        equipmentId: '',
        planStartTime: '',
        planEndTime: '',
        maintenanceItem: '',
        maintenanceLevel: '',
        maintenancePeriod: '',
        estimatedCost: '',
        responsiblePerson: '',
        remarks: ''
      }
    },
    
    // 保养级别变化时自动设置保养周期
    handleMaintenanceLevelChange(value) {
      if (value) {
        switch (value) {
          case 1:
            this.form.maintenancePeriod = '月度'
            break
          case 2:
            this.form.maintenancePeriod = '季度'
            break
          case 3:
            this.form.maintenancePeriod = '半年'
            break
          default:
            this.form.maintenancePeriod = '月度'
        }
      }
    },
    
    // 提交表单
    async submitForm() {
      try {
        console.log('开始提交保养计划表单...', this.form)
        
        // 表单验证
        const valid = await this.$refs.maintenancePlanForm.validate()
        if (!valid) {
          console.log('表单验证失败')
          return
        }
        
        // 验证计划结束时间不能早于开始时间
        if (this.form.planEndTime && this.form.planStartTime) {
          if (new Date(this.form.planEndTime) < new Date(this.form.planStartTime)) {
            this.$message.error('计划结束时间不能早于开始时间')
            return
          }
        }
        
        // 验证预计费用格式
        if (this.form.estimatedCost && isNaN(parseFloat(this.form.estimatedCost))) {
          this.$message.error('预计费用必须是有效数字')
          return
        }
        
        // 构建提交数据
        const submitData = {
          ...this.form,
          estimatedCost: this.form.estimatedCost ? parseFloat(this.form.estimatedCost) : null
        }
        
        console.log('提交数据:', submitData)
        
        // 显示加载状态
        const loading = this.$loading({
          lock: true,
          text: '正在创建保养计划...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        
        try {
          const response = await maintenancePlanApi.createMaintenancePlan(submitData)
          console.log('创建保养计划响应:', response)
          
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: '保养计划创建成功！',
              duration: 2000
            })
            this.addDialogVisible = false
            this.resetForm()
            // 重新加载数据
            await this.loadMaintenancePlanData()
          } else {
            console.error('创建失败:', response.message)
            this.$message({
              type: 'error',
              message: response.message || '创建失败',
              duration: 3000
            })
          }
        } catch (apiError) {
          console.error('API调用异常:', apiError)
          this.$message({
            type: 'error',
            message: '网络请求失败，请检查后端服务是否正常运行',
            duration: 3000
          })
        } finally {
          loading.close()
        }
      } catch (error) {
        console.error('创建保养计划失败:', error)
        this.$message({
          type: 'error',
          message: '创建失败，请稍后重试',
          duration: 3000
        })
      }
    },
    
    // 取消表单
    cancelForm() {
      this.$confirm('确定要取消吗？未保存的数据将丢失。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '继续编辑',
        type: 'warning'
      }).then(() => {
        this.addDialogVisible = false
        this.resetForm()
      }).catch(() => {
        // 用户选择继续编辑，不做任何操作
      })
    },
    
    
    
    // 执行保养
    async handleExecute(row) {
      try {
        const response = await maintenancePlanApi.updateMaintenancePlanStatus(row.maintenancePlanId, 1)
        if (response.code === 200) {
          this.$message.success('保养计划状态已更新为执行中')
          this.loadMaintenancePlanData()
        } else {
          this.$message.error(response.message || '更新状态失败')
        }
      } catch (error) {
        console.error('更新保养计划状态失败:', error)
        this.$message.error('更新状态失败，请稍后重试')
      }
    },
    
    // 删除保养计划
    async handleDelete(row) {
      this.$confirm('确定要删除这个保养计划吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const response = await maintenancePlanApi.deleteMaintenancePlan(row.maintenancePlanId)
          if (response.code === 200) {
            this.$message.success('删除成功')
            this.loadMaintenancePlanData()
          } else {
            this.$message.error(response.message || '删除失败')
          }
        } catch (error) {
          console.error('删除保养计划失败:', error)
          this.$message.error('删除失败，请稍后重试')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    
    // 查看保养计划详情
    async handleView(row) {
      try {
        const response = await maintenancePlanApi.getMaintenancePlanById(row.maintenancePlanId)
        if (response.code === 200) {
          this.detailData = response.data
          this.detailDialogVisible = true
        } else {
          this.$message.error(response.message || '获取详情失败')
        }
      } catch (error) {
        console.error('获取保养计划详情失败:', error)
        this.$message.error('获取详情失败，请稍后重试')
      }
    },
    
    // 编辑保养计划
    async handleEdit(row) {
      try {
        const response = await maintenancePlanApi.getMaintenancePlanById(row.maintenancePlanId)
        if (response.code === 200) {
          this.editForm = {
            maintenancePlanId: response.data.maintenancePlanId,
            equipmentId: response.data.equipmentId,
            planStartTime: response.data.planStartTime,
            planEndTime: response.data.planEndTime,
            maintenanceItem: response.data.maintenanceItem,
            maintenanceLevel: response.data.maintenanceLevel,
            maintenancePeriod: response.data.maintenancePeriod,
            estimatedCost: response.data.estimatedCost,
            responsiblePerson: response.data.responsiblePerson,
            remarks: response.data.remarks,
            planStatus: response.data.planStatus
          }
          this.editDialogVisible = true
        } else {
          this.$message.error(response.message || '获取详情失败')
        }
      } catch (error) {
        console.error('获取保养计划详情失败:', error)
        this.$message.error('获取详情失败，请稍后重试')
      }
    },
    
    // 从详情页面进入编辑
    handleEditFromDetail() {
      this.detailDialogVisible = false
      this.handleEdit({ maintenancePlanId: this.detailData.maintenancePlanId })
    },
    
    // 编辑表单中保养级别变化
    handleEditMaintenanceLevelChange(value) {
      if (value) {
        switch (value) {
          case 1:
            this.editForm.maintenancePeriod = '月度'
            break
          case 2:
            this.editForm.maintenancePeriod = '季度'
            break
          case 3:
            this.editForm.maintenancePeriod = '半年'
            break
          default:
            this.editForm.maintenancePeriod = '月度'
        }
      }
    },
    
    // 提交编辑
    async submitEdit() {
      try {
        console.log('开始提交编辑表单...', this.editForm)
        
        // 表单验证
        const valid = await this.$refs.editForm.validate()
        if (!valid) {
          console.log('表单验证失败')
          return
        }
        
        // 验证计划结束时间不能早于开始时间
        if (this.editForm.planEndTime && this.editForm.planStartTime) {
          if (new Date(this.editForm.planEndTime) < new Date(this.editForm.planStartTime)) {
            this.$message.error('计划结束时间不能早于开始时间')
            return
          }
        }
        
        // 验证预计费用格式
        if (this.editForm.estimatedCost && isNaN(parseFloat(this.editForm.estimatedCost))) {
          this.$message.error('预计费用必须是有效数字')
          return
        }
        
        // 构建提交数据
        const submitData = {
          ...this.editForm,
          estimatedCost: this.editForm.estimatedCost ? parseFloat(this.editForm.estimatedCost) : null
        }
        
        console.log('提交编辑数据:', submitData)
        
        // 显示加载状态
        const loading = this.$loading({
          lock: true,
          text: '正在更新保养计划...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        
        try {
          const response = await maintenancePlanApi.updateMaintenancePlan(submitData)
          console.log('更新保养计划响应:', response)
          
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: '保养计划更新成功！',
              duration: 2000
            })
            this.editDialogVisible = false
            // 重新加载数据
            await this.loadMaintenancePlanData()
          } else {
            console.error('更新失败:', response.message)
            this.$message({
              type: 'error',
              message: response.message || '更新失败',
              duration: 3000
            })
          }
        } catch (apiError) {
          console.error('API调用异常:', apiError)
          this.$message({
            type: 'error',
            message: '网络请求失败，请检查后端服务是否正常运行',
            duration: 3000
          })
        } finally {
          loading.close()
        }
        
      } catch (error) {
        console.error('更新保养计划失败:', error)
        this.$message({
          type: 'error',
          message: '更新失败，请稍后重试',
          duration: 3000
        })
      }
    },
    
    // 取消编辑
    cancelEdit() {
      this.$confirm('确定要取消编辑吗？未保存的修改将丢失。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '继续编辑',
        type: 'warning'
      }).then(() => {
        this.editDialogVisible = false
      }).catch(() => {
        // 用户选择继续编辑，不做任何操作
      })
    },
    
    // 获取状态标签类型
    getStatusTagType(status) {
      switch (status) {
        case 0:
          return 'info'
        case 1:
          return 'warning'
        case 2:
          return 'success'
        case 3:
          return 'danger'
        default:
          return 'info'
      }
    },
    
    // 添加模拟数据
    addMockData() {
      this.tableData = [
        {
          maintenancePlanId: 'MP001',
          equipmentName: '1号电梯',
          equipmentCode: 'DT001',
          equipmentType: '电梯',
          maintenanceItem: '定期保养',
          creationDate: '2024-01-15',
          maintenancePeriod: '月度',
          maintenanceLevelName: '一级保养',
          planStatus: 0,
          planStatusName: '待执行',
          planStartTime: '2024-02-01',
          planEndTime: '2024-02-05',
          estimatedCost: 5000,
          responsiblePerson: '张三',
          remarks: '定期维护保养'
        },
        {
          maintenancePlanId: 'MP002',
          equipmentName: '中央空调主机',
          equipmentCode: 'KT001',
          equipmentType: '空调',
          maintenanceItem: '清洁保养',
          creationDate: '2024-01-20',
          maintenancePeriod: '季度',
          maintenanceLevelName: '二级保养',
          planStatus: 1,
          planStatusName: '执行中',
          planStartTime: '2024-02-10',
          planEndTime: '2024-02-15',
          estimatedCost: 8000,
          responsiblePerson: '李四',
          remarks: '空调系统清洁保养'
        },
        {
          maintenancePlanId: 'MP003',
          equipmentName: '消防栓系统',
          equipmentCode: 'XF001',
          equipmentType: '消防设备',
          maintenanceItem: '安全检查',
          creationDate: '2024-01-25',
          maintenancePeriod: '半年',
          maintenanceLevelName: '三级保养',
          planStatus: 2,
          planStatusName: '已完成',
          planStartTime: '2024-01-30',
          planEndTime: '2024-02-05',
          estimatedCost: 3000,
          responsiblePerson: '王五',
          remarks: '消防设备安全检查'
        }
      ]
      this.total = this.tableData.length
      this.$message.info('已加载模拟数据')
    }
  }
}
</script>

<style scoped>
.maintenance-plan-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.operation-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-group .el-input {
  margin-right: 0;
}

.search-group .el-button {
  margin-left: 0;
}

.pagination-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.plan-form {
  margin-bottom: 15px;
}

.dialog-footer {
  text-align: right;
}

/* 表格样式优化 */
.el-table {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-table th {
  background-color: #fafafa;
  color: #333;
  font-weight: 600;
}

.el-table td {
  padding: 12px 0;
}

/* 操作按钮样式 */
.el-table .el-button--text {
  color: #409eff;
  font-size: 12px;
  padding: 0 8px;
}

.el-table .el-button--primary.is-plain {
  color: #409eff;
  border-color: #409eff;
  font-size: 12px;
  padding: 4px 8px;
}

.el-table .el-button--danger.is-plain {
  color: #f56c6c;
  border-color: #f56c6c;
  font-size: 12px;
  padding: 4px 8px;
}

/* 执行保养按钮样式 */
.execute-btn {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%) !important;
  border: none !important;
  color: #fff !important;
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(103, 194, 58, 0.2);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.execute-btn i {
  font-size: 12px;
  margin-right: 4px;
  transition: transform 0.3s ease;
}

.execute-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.execute-btn:hover {
  background: linear-gradient(135deg, #85ce61 0%, #67c23a 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.4);
}

.execute-btn:hover i {
  transform: scale(1.1);
}

.execute-btn:hover::before {
  left: 100%;
}

.execute-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(103, 194, 58, 0.3);
}

.execute-btn:active i {
  transform: scale(0.95);
}

.execute-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.3);
}

/* 分页组件样式 */
.el-pagination {
  text-align: right;
}

.el-pagination .el-pagination__total {
  color: #606266;
  font-size: 13px;
}

.el-pagination .el-pagination__sizes .el-select .el-input {
  width: 100px;
}

.el-pagination .el-pagination__jump {
  color: #606266;
  font-size: 13px;
}

/* 搜索框样式 */
.el-input__inner {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}

.el-input__inner:focus {
  border-color: #409eff;
}

/* 按钮样式 */
.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  border-radius: 4px;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-button--default {
  background-color: #fff;
  border-color: #dcdfe6;
  color: #606266;
  border-radius: 4px;
}

.el-button--default:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

/* 对话框样式 - 与图片完全一致 */
.maintenance-plan-dialog .el-dialog {
  border-radius: 0;
  background-color: #f5f5f5;
  margin-top: 5vh !important;
}

.maintenance-plan-dialog .el-dialog__header {
  display: none;
}

.maintenance-plan-dialog .el-dialog__body {
  padding: 0;
  background-color: #f5f5f5;
}

.plan-form-container {
  background-color: #fff;
  border-radius: 0;
  padding: 40px 50px;
  box-shadow: none;
  border: 1px solid #e4e7ed;
}

.form-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 30px 0;
  text-align: left;
}

.plan-form .el-form-item {
  margin-bottom: 25px;
}

.plan-form .el-form-item__label {
  color: #333;
  font-weight: 500;
  font-size: 14px;
  line-height: 32px;
}

.plan-form .el-input__inner,
.plan-form .el-textarea__inner {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  padding: 8px 12px;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
}

.plan-form .el-input__inner:focus,
.plan-form .el-textarea__inner:focus {
  border-color: #409eff;
  box-shadow: none;
}

.plan-form .el-textarea__inner {
  height: auto;
  min-height: 80px;
  line-height: 1.5;
}

.plan-form .el-select .el-input__inner {
  padding-right: 30px;
}

.plan-form .el-date-editor .el-input__inner {
  padding-right: 30px;
}

.plan-form .el-input-group__append {
  background-color: #f5f7fa;
  border-color: #dcdfe6;
  color: #606266;
}

.dialog-footer {
  text-align: center;
  padding: 20px 50px;
  background-color: #fff;
  border-top: 1px solid #e4e7ed;
}

.dialog-footer .el-button {
  min-width: 100px;
  margin: 0 15px;
  height: 36px;
  border-radius: 4px;
  font-size: 14px;
}

.cancel-btn {
  background-color: #f5f7fa !important;
  border-color: #dcdfe6 !important;
  color: #606266 !important;
}

.cancel-btn:hover {
  background-color: #ecf5ff !important;
  border-color: #c6e2ff !important;
  color: #409eff !important;
}

.save-btn {
  background-color: #67c23a !important;
  border-color: #67c23a !important;
  color: #fff !important;
}

.save-btn:hover {
  background-color: #85ce61 !important;
  border-color: #85ce61 !important;
}

/* 下拉箭头样式 */
.plan-form .el-select .el-input__suffix {
  right: 8px;
}

.plan-form .el-date-editor .el-input__suffix {
  right: 8px;
}

/* 必填字段星号样式 */
.plan-form .el-form-item.is-required .el-form-item__label::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}

/* 表单样式 */
.el-form-item__label {
  color: #606266;
  font-weight: 500;
}

.el-input__inner,
.el-textarea__inner {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: #409eff;
}

.el-select .el-input__inner {
  border-radius: 4px;
}

/* 详情对话框样式 */
.detail-dialog .el-dialog {
  border-radius: 8px;
  background-color: #f5f5f5;
  margin-top: 5vh !important;
}

.detail-dialog .el-dialog__header {
  display: none;
}

.detail-dialog .el-dialog__body {
  padding: 0;
  background-color: #f5f5f5;
}

.detail-container {
  background-color: #fff;
  padding: 40px 50px;
  box-shadow: none;
  border: 1px solid #e4e7ed;
}

.detail-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 30px 0;
  text-align: center;
  border-bottom: 2px solid #409eff;
  padding-bottom: 15px;
}

.detail-content {
  margin-top: 20px;
}

.detail-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.detail-item.full-width {
  flex-direction: column;
  align-items: flex-start;
}

.detail-item label {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  min-width: 120px;
  margin-right: 10px;
}

.detail-item span {
  color: #666;
  font-size: 14px;
  flex: 1;
}

.detail-item.full-width label {
  margin-bottom: 8px;
}

/* 编辑对话框样式 */
.edit-dialog .el-dialog {
  border-radius: 8px;
  background-color: #f5f5f5;
  margin-top: 5vh !important;
}

.edit-dialog .el-dialog__header {
  display: none;
}

.edit-dialog .el-dialog__body {
  padding: 0;
  background-color: #f5f5f5;
}

.edit-container {
  background-color: #fff;
  padding: 40px 50px;
  box-shadow: none;
  border: 1px solid #e4e7ed;
}

.edit-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 30px 0;
  text-align: center;
  border-bottom: 2px solid #409eff;
  padding-bottom: 15px;
}

.edit-form {
  margin-top: 20px;
}

.edit-form .el-form-item {
  margin-bottom: 25px;
}

.edit-form .el-form-item__label {
  color: #333;
  font-weight: 600;
  font-size: 14px;
  line-height: 40px;
}

.edit-form .el-input__inner,
.edit-form .el-textarea__inner {
  padding: 12px 15px;
  height: 40px;
  line-height: 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.edit-form .el-input__inner:focus,
.edit-form .el-textarea__inner:focus {
  border-color: #409eff;
  outline: none;
}

.edit-form .el-textarea__inner {
  height: auto;
  min-height: 80px;
}

.edit-form .el-input-group__append {
  background-color: #f5f7fa;
  border-color: #dcdfe6;
  color: #909399;
}

/* 按钮样式 */
.edit-btn {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.edit-btn:hover {
  background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .operation-bar {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .search-group {
    justify-content: center;
  }
  
  .pagination-wrap {
    justify-content: center;
  }
  
  .detail-container,
  .edit-container {
    padding: 20px 30px;
  }
  
  .detail-title,
  .edit-title {
    font-size: 20px;
  }
}
</style>